<template>
  <!-- 供应链评价 -->
  <div class="storageChargingScreen">
    <div class="contentBox">
      <div class="contentCenter">
        <!-- 故障类别设备厂家分析 -->
        <StationFailureAnalysis />
      </div>
    </div>
    <div class="contentBox">
      <div class="contentCenter">
        <!-- 供应商响应分析 -->
        <SupplierResponse />
      </div>
    </div>
    <div class="contentBox">
      <div class="contentLeft">
        <!-- 设备效率分析 -->
        <EquipEfficiency />
      </div>
      <div class="contentRight">
        <!-- 故障归因分析 -->
        <FailureAttribution />
      </div>
    </div>
  </div>
</template>
<script setup>

import StationFailureAnalysis from "./StationFailureAnalysis/index.vue";
import SupplierResponse from "./SupplierResponse/index.vue";
import EquipEfficiency from "./EquipEfficiency/index.vue";
import FailureAttribution from "./FailureAttribution/index.vue";

const $api = inject("$api");

onMounted(async () => {});
</script>
<style scoped lang="less">
.storageChargingScreen {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contentBox {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  .contentLeft {
    border-radius: 4px;
    flex-shrink: 0;
  }

  .contentRight {
    border-radius: 4px;
    flex: 1;
  }

  .contentCenter {
    width: 100%;
    flex: 1;
  }
}
</style>
